<template>
     <el-container>
    <div style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: -1;">
      <video data-v-78a43190="" loop autoplay muted style="width: 100%;">
        <source data-v-78a43190="" src="/media/0721.mp4" type="video/mp4">
      </video>
    </div>
    <el-header>
      <el-image :src="'/img/logo.3415ed0b.png'" :fit="'cover'">
        <img  class="el-image__inner" style="object-fit: cover;">
      </el-image>
      <el-image :src="'/img/wzqx.dbd7adf6.png'" :fit="'cover'">
        <img  class="el-image__inner" style="object-fit: cover;">
      </el-image>
    </el-header>
    <el-main>
      <el-card class="login">
        <div class="title">
          <div class="el-image" style="width: 35px; height: 35px; margin-right: 10px;">
            <img src="/img/xiaohui.85c451bc.png" class="el-image__inner" style="object-fit: cover;">
          </div>
          <h2>教务管理系统</h2>
        </div>
        <el-form :rules="rules" :model="model" ref="formLogin">
          <el-form-item prop="user_name">
            <el-input clearable v-model.trim="model.user_name">
              <template >
                <div style="width: 70px">
                  <i class="el-icon-user"></i>
                  <span style="margin-left: 10px">用户名</span>
                </div>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_pwd">
            <el-input clearable show-password v-model="model.user_pwd">
              <template #="prepend">
                <div style="width: 70px">
                  <i class="el-icon-lock"></i>
                  <span style="margin-left: 10px">密码</span>
                </div>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" style="width: 200px;" @click="login">登录</el-button>
      </el-card>
    </el-main>
    <el-footer>
      <p style="color: #fff;">©1919 山北魔法小学 版权没有: 19190810IKISUGI</p>
    </el-footer>
  </el-container>
    <!-- <el-form ref="formRef" label-width="100px" :model="model" :rules="rules">
        <el-form-item label="用户名:" prop="user_name">
            <el-input v-model="model.user_name"></el-input>
        </el-form-item>
        <el-form-item label="密码:" prop="user_pwd">
            <el-input v-model="model.user_pwd" type="password"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button @click="login">登录</el-button>
        </el-form-item>
    </el-form> -->
</template>
  
<script setup lang="ts">
import { reactive, ref } from "vue";
import { UserApi } from "@/api";
import { useRouter } from "vue-router";
import type { FormInstance, FormRules } from "element-plus";
const router = useRouter();
const model = reactive<HttpPayload.Login>({ user_name: "", user_pwd: "" });
const formRef = ref<FormInstance | null>(null);
const rules: FormRules = {
    user_name: [
        { required: true, message: "*用户名不为空*", trigger: "blur" },
        { min: 5, max: 20, message: "*用户名长度5-20*" },
    ],
    user_pwd: [
        { required: true, message: "*密码不为空*", trigger: "blur" },
        { min: 3, max: 20, message: "*密码长度3-20*" },
    ],
};
const login = async () => {
    try {
        await formRef.value?.validate();
        const token = await UserApi.login(model);
        sessionStorage.setItem("token", token);
        router.replace({ name: "Home" });
    } catch (e) {
        /* */
    }
};
</script>
  
<style scoped lang="stylus">
.el-container {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
}

.el-header {
  padding: 0 300px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.el-card {
  width: 400px;
  height: 300px;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-60%);
  background-color: hsla(0, 0%, 100%, .9);
}

.login {
  text-align: center;
}

.login .title {
  margin-bottom: 22px;
  color: #888;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-footer {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
  